<template>
  <div class="container">
    <el-form label-width="90px" :model="query">
      <div class="search">
        <el-form-item label="创建人姓名">
          <el-input clearable v-on:change="getData()" v-model="query.userName" placeholder="请输入创建人"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input clearable v-on:change="getData()" v-model="query.title" placeholder="请输入新闻标题"></el-input>
        </el-form-item>
        <el-form-item label="请选择栏目">
          <el-select clearable v-model="query.categoryId" v-on:change="getData()" placeholder="请选择栏目">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择状态">
          <el-select clearable v-model="query.newsStatus" v-on:change="getData()" placeholder="请选择状态">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="margin-left: 1rem">
          <el-button type="primary" v-on:click="query.offset = 1; getData()">搜索</el-button>
          <el-button type="primary" v-on:click="resert()">重置</el-button>
          <el-button type="primary" plain @click="gotoPublish('new')">新建</el-button>
          <el-button type="primary" :disabled="multipleSelection.length == 0" @click="newsPublish">提交审核</el-button>
          <!-- <el-button type="primary" @click="newsPublish">提交审核</el-button> -->
          <!-- <el-button type="primary" @click="newsApprove">审批</el-button>
          <el-button type="primary" @click="newsTop">置顶</el-button>
          <el-button type="primary" @click="newsUntop">取消置顶</el-button>
          <el-button type="danger" @click="newsDelete">删除</el-button>
          <el-button type="danger" @click="newsDisable">停用</el-button>
          <el-button type="danger" @click="newsEnable">启用</el-button> -->
        </div>
      </div>
    </el-form>
    <div class="tables">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55"> </el-table-column>
        <el-table-column prop="title" align="center" label="标题" width="120">
        </el-table-column>
        <el-table-column prop="categoryName" align="center" label="栏目" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.newsStatus == '0'">待发布</span>
            <span v-if="scope.row.newsStatus == '1'">发布（待审核）</span>
            <span v-if="scope.row.newsStatus == '2'">已审核</span>
            <span v-if="scope.row.newsStatus == '3'">驳回（审批不通过</span>
            <span v-if="scope.row.newsStatus == '4'">停用</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="置顶" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.isTop == '0'">未置顶</span>
            <span v-if="scope.row.isTop == '1'">已置顶</span>
          </template>
        </el-table-column>
        <el-table-column label="日期" align="center" width="120">
          <template slot-scope="scope">{{ scope.row.modifyTime }}</template>
        </el-table-column>
        <!--       
        <el-table-column prop="creatorName" align="center" label="创建人" show-overflow-tooltip>
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" :disabled="scope.row.newsStatus == '1'"
              @click="gotoPublish('edit', scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="viewDetails(scope.row.id)">查看</el-button>
            <!-- <el-button size="mini" type="text" @click="newsRejected(scope.row)">驳回</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination :query="query" @getData="getData" :total="total" />
      </div>
    </div>
  </div>
</template>
<script>
import { findCategoryData } from "../../api/index";
import Pagination from "@/components/Pagination";
import {
  newsFindPage,
  newsSubmit,
  newsTop,
  newsUntop,
  newsDelete,
  newsDisable,
  newsEnable,
  newsRejected,
  newsApprove,
} from "../../api/index";
export default {
  name: "invitation",
  components: { Pagination },
  data() {
    return {
      total: 0,
      query: {
        offset: 1,
        limit: 10,
        title: "",
        userName: "",
        startDate: "",
        endDate: "",
        newsStatus: '',
        creatorName: "",
        title: "",
        categoryId: "",
      },
      options1: [
        { value: '0', label: '待提交' },
        { value: '1', label: '待审核' },
        { value: '2', label: '已审核' },
        { value: '3', label: '驳回（审批不通过)' },
        { value: '4', label: '停用' },
      ],
      tableData: [],
      multipleSelection: [],
      options: [],
    };
  },
  created() {
    this.getData();
    this.getCategoryData();
  },
  methods: {
    resert() {
      this.query = {
        offset: 1,
        limit: this.query.limit,
        startDate: "",
        endDate: "",
        newsStatus: '',
        userName: "",
        title: "",
        categoryId: "",
      };
      this.getData();
    },
    async getCategoryData() {
      let res = await findCategoryData();
      if (res.data.status == 100) {
        this.options = res.data.data.map((res) => {
          return {
            value: res.id,
            label: res.name,
          };
        });
      }
    },
    async newsApprove() {
      //审批
      let data = await this.$publicJS.delConfirm("是否审批通过");
      if (data) {
        const ids = this.multipleSelection.map((item) => item.id).join(",");
        let res = await newsApprove({ ids: ids });
        if (res.data.status == 100) {
          this.$message.success("审批成功");
          this.getData();
        }
      }
    },
    async newsDisable() {
      //停用
      let data = await this.$publicJS.delConfirm("是否停用");
      if (data) {
        const ids = this.multipleSelection.map((item) => item.id).join(",");
        let res = await newsDisable({ ids: ids });
        if (res.data.status == 100) {
          this.$message.success("停用成功");
          this.getData();
        }
      }
    },
    async newsRejected(row) {
      //驳回
      let data = await this.$publicJS.delConfirm("是否驳回");
      if (data) {
        const ids = row.id;
        let res = await newsRejected({ ids: ids });
        if (res.data.status == 100) {
          this.$message.success("驳回成功");
          this.getData();
        }
      }
    },
    async newsEnable() {
      //启用
      let data = await this.$publicJS.delConfirm("是否启用");
      if (data) {
        const ids = this.multipleSelection.map((item) => item.id).join(",");
        let res = await newsEnable({ ids: ids });
        if (res.data.status == 100) {
          this.$message.success("启用成功");
          this.getData();
        }
      }
    },
    async newsTop() {
      //置顶
      const ids = this.multipleSelection.map((item) => item.id).join(",");
      let res = await newsTop({ ids: ids });
      if (res.data.status == 100) {
        this.$message.success("置顶成功");
        this.getData();
      }
    },
    async newsDelete() {
      //删除
      let data = await this.$publicJS.delConfirm("是否删除这条新闻");
      if (data) {
        const ids = this.multipleSelection.map((item) => item.id).join(",");
        let res = await newsDelete({ ids: ids });
        if (res.data.status == 100) {
          this.$message.success("删除成功");
          this.getData();
        }
      }
    },
    async newsUntop() {
      //取消置顶
      const ids = this.multipleSelection.map((item) => item.id).join(",");
      let res = await newsUntop({ ids: ids });
      if (res.data.status == 100) {
        this.$message.success("取消置顶成功");
        this.getData();
      }
    },
    async newsPublish() {
      //新闻发布
      const ids = this.multipleSelection.map((item) => item.id).join(",");
      let res = await newsSubmit({ ids: ids });
      if (res.data.status == 100) {
        this.$message("提交审核成功");
        this.getData();
      }
    },
    async getData() {
      //获取数据
      let res = await newsFindPage(this.query);
      if (res.data.status == 100) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      }
    },
    viewDetails(id) {
      this.$router.push({
        path: "/newsDetails",
        query: {
          id: id,
        },
      });
    },
    gotoPublish(isNew, id = "") {
      this.$router.push({
        path: "/newNews",
        query: {
          isNew: isNew,
          id: id,
        },
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped>
.search {
  display: flex;
  flex-flow: wrap;
  margin-bottom: 2rem;
}

.tables {
  margin: 0 1rem;
}
</style>
